<!--
功能：用户管理
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-12-01 10:43:15
-->
<template>
  <div>
    <!-- 页面标题 -->
    <PageTitle title="系统用户" subTitle="系统用户列表，增删改查功能"></PageTitle>
    <!-- 页面搜索 -->
    <PageSearch
      :pageSearchOptions="pageSearchOptions"
      @onSubmit="submitCallback"
      @onReset="resetCallback"
      style="margin-top: 10px"
    ></PageSearch>
    <!-- 页面表格 -->
    <pageTable
      :pageTableOptions="pageTableOptions"
      @onRefresh="refreshCallback"
      @onAddData="addDataCallback"
      @onEditData="editDataCallback"
      @onDeleteData="deleteDataCallback"
      @onSelectEvent="selectEventCallback"
      @onPageChange="pageChangeCallback"
    >
      <template #avatarDefault="{ content }">
        <a-avatar v-if="content.avatar" :src="content.avatar" />
        <span v-else>无</span>
      </template>
    </pageTable>
  </div>
</template>
<script setup lang="jsx">
import { reactive } from 'vue'
import dayjs from 'dayjs'
import { getUserList } from '@/api/modules/organization.js'
// 搜索配置
const pageSearchOptions = reactive({
  // 表单数据对象需与表单数据配置项的field一致
  model: {
    name: null,
    mobile: null,
    status: 0,
    createTime: dayjs()
  },
  // 表单验证规则
  rules: {},
  // 表单数据配置项
  modelItem: [
    // 文本输入框
    {
      type: 'input', // 表单类型
      field: 'name', // 字段属性key
      title: '用户名称', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请输入用户名称' // 占位文字
    },
    {
      type: 'input', // 表单类型
      field: 'mobile', // 字段属性key
      title: '手机号码', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请输入手机号码' // 占位文字
    },
    // 选择器
    {
      type: 'select', // 表单类型
      field: 'status', // 字段属性key
      title: '用户状态', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请选择用户状态', // 占位文字
      showSearch: true, // 是否可搜索
      dataOptions: [
        { value: 0, label: '正常' },
        { value: 1, label: '禁用' }
      ], // 数据源选项配置 array<{value, label, [disabled, key, title]}>
      valueField: 'value', // 数据源value键名称
      labelField: 'label' // 数据源label键名称
    },
    // 日期选择
    {
      type: 'datePicker', // 表单类型
      field: 'createTime', // 字段属性key
      title: '创建时间', // 字段名称
      span: 4, // 栅格占位格数，为 0 时相当于 display: none
      placeholder: '请选择创建', // 占位文字
      mode: 'date' // 日期面板的状态 time | date | month | year | decade
    }
  ]
})
// 表格配置项
const pageTableOptions = reactive({
  filename: '系统用户列表', // 导出文件名
  sheetName: '系统用户', // 表名
  loading: false, // 是否加载中
  columns: [
    { type: 'checkbox', width: 50, align: 'center' },
    // { type: 'seq', width: 50, align: 'center' },
    { field: 'name', title: '姓名', width: 100, align: 'center' },
    { field: 'username', title: '用户名', width: 150, align: 'center' },
    {
      field: 'avatar',
      title: '头像',
      width: 100,
      align: 'center',
      slots: { default: 'avatarDefault' }
    },
    {
      field: 'sex',
      title: '性别',
      width: 60,
      align: 'center',
      slots: {
        // 使用渲染函数
        default: ({ row }) => {
          return [<span>{row.sex == 1 ? '男' : '女'}</span>]
        }
      }
    },
    {
      field: 'status',
      title: '状态',
      width: 100,
      align: 'center',
      slots: {
        // 使用渲染函数
        default: ({ row }) => {
          return [
            <a-tag color={row.status == 0 ? 'green' : 'red'}>
              {row.status == 0 ? '正常' : '锁定'}
            </a-tag>
          ]
        }
      }
    },
    { field: 'birthday', title: '生日', width: 100 },
    { field: 'mobile', title: '手机', width: 150 },
    { field: 'email', title: '邮箱', width: 200 },
    { field: 'companyName', title: '公司', width: 150 },
    { field: 'departmentName', title: '部门', width: 150 },
    { field: 'dutyName', title: '职务', width: 150 },
    { field: 'supervisorName', title: '主管', width: 100 },
    { field: 'address', title: '地址', width: 200, showOverflow: 'ellipsis' },
    { field: 'descript', title: '简述', width: 200, showOverflow: 'ellipsis' }
  ], // 列配置信息
  total: 0, // 数据总数
  pageSize: 10, // 每页条数
  page: 1, // 当前页
  data: [] // 表格数据
})
// 获取数据
const getTableData = () => {
  pageTableOptions.loading = true
  getUserList().then((res) => {
    pageTableOptions.loading = false
    const { code, data } = res
    if (code == 200) {
      pageTableOptions.data = data.list
      pageTableOptions.total = data.total
      pageTableOptions.page = data.page
      pageTableOptions.pageSize = data.pageSize
    }
  })
}
// 搜索提交回调
const submitCallback = (event) => {
  console.log('提交搜索回调')
  console.log(event)
  getTableData()
}
// 搜索重置回调
const resetCallback = (event) => {
  console.log('重置搜索回调')
  console.log(event)
  getTableData()
}
// 刷新回调
const refreshCallback = () => {
  getTableData()
}
// 添加数据回调
const addDataCallback = () => {
  console.log('添加数据回调')
}
// 编辑数据回调
const editDataCallback = () => {
  console.log('编辑数据回调')
}
// 删除数据回调
const deleteDataCallback = () => {
  console.log('删除数据回调')
}
// 选择数据回调
const selectEventCallback = () => {
  console.log('选择数据回调')
}
// 选择数据回调
const pageChangeCallback = () => {
  console.log('分页改变回调')
  getTableData()
}
getTableData()
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
}
</style>
